<template>
	<transition name="el-fade-in-linear">
		<div class="resBox" v-show="show">
			<div class="timeDiv">{{timeOut}}s</div>
			<div class="resImgBox">
				<img class="jgImg" src="../../assets/images/zndz/jieguo.png" />
			</div>
			<div class="bottom">
				<span class="bottomText" v-if="type==1">
					感谢您的选择，很高兴为您提供准确的推荐结果！
				</span>
				<span class="bottomText" v-if="type==0">
					感谢您的选择，我们将为您提供更准确的推荐结果！
				</span>
			</div>

		</div>
	</transition>
</template>

<script>
	export default {
		name: "resultBox",
		props:['type'],
		data() {
			return {
				show: false,
				timeOut: 3,
				timeInter: ''
			};
		},
		methods: {
			open() {
				this.show = true;
				this.timeOut = 3;
				this.timeInter = window.setInterval(() => {
					if (this.timeOut >= 1) {
						this.timeOut -= 1;
					} else {
						this.close();
						clearInterval(this.timeInter);
						//返回首页
						// this.$router.push('/');
					}
				}, 1000);
			},
			close() {
				this.show = false;
				clearInterval(this.timeInter);
				this.$emit('closeRestBox')
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.resBox {
		position: absolute;
		left: calc(50% - 14.75rem);
		top: calc(50% - 11.25rem);
		width: 27rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 6px;
		z-index: 3;
		padding-bottom: 1.25rem;
	}

	.timeDiv {
		position: absolute;
		right: 0px;
		top: 0px;
		width: 1.9375rem;
		height: 1.5rem;
		font-size: 2rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #57A8FF;
		margin: 20px;
	}

	.resImgBox {
		margin-top: 73px;
		width: 100%;
		text-align: center;
	}

	.jgImg {
		width: 150px;
		height: 132px;
	}
	.bottom{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 36px;
	}
	.bottomText{
		font-size: 1.5rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		text-align: center;
	}
</style>
